import { LitElement, html } from "lit";

class QueryingDom extends LitElement {
    static get properties() {
        return {
            users: { type: Array }
        };
    }

    constructor() {
        super();

        this.users = ["steve"];
    }

    //如果要强制访问dom节点，可以在元素实例上使用常规查询选择器。
    // LitElement使用shadow dom，所以选择器应该在元素的shadowroot上执行。
    //由于shadow dom的存在，选择器的作用域仅限于该元素实例的dom。
    //
    //注意元素的第一次呈现是异步的，所以请求的dom节点可能会
    //运行此函数时不可用。
    //
    //查看第一次更新和更新的示例，以获得更安全的访问dom节点的方法
    get usernameInput() {
        return this.shadowRoot.getElementById("usernameInput");
    }

    get username() {
        // Use the input getter, and get the value property from the input element
        return this.usernameInput.value;
    }

    render() {
        return html`
      <input id="usernameInput" name="username" />
      <button @click="${() => this._addUsername()}">Add user</button>
      <ul>
        ${this.users.map(
            user => html`
            <li>${user}</li>
          `
        )}
      </ul>
    `;
    }

    _addUsername() {
        this.users = [...this.users, this.username];

        // Use the input getter and clear the value
        this.usernameInput.value = "";
    }
}

customElements.define("querying-dom", QueryingDom);
